<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <title>我最喜欢的电视剧</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app">
        <!--  -->
        <div class="header ">
            <div class="header-inner center">
                <div class="header-inner-img">
                    <img src="./images/baike-logo.png" alt="">
                </div>
                <div class="search">
                    <!-- 这个地方点击事件就会有bug -->
                    <!-- <input type="text" v-model='isShow?"": bk_key' value="" @click="show">
                    <input type="button" name=" " id=" " value="进入词条" @click="query"> -->
                    <!-- placeholder="希望输入的值" -->
                    <input type="text" value="" placeholder="武林外传">
                    <input type="button" name=" " id=" " value="进入词条" @click="query">
                </div>
            </div>
        </div>

        <!-- top start-->
        <div class="top ">
            <div class="top-inner center ">
                <!-- 这个地方 替换成 v-text 但是还是有出现 闪屏的情况 -->
                <h1 v-text="top.h1"></h1>
                <p v-text="top.p"></p>
                <div class="top-images ">
                    <!-- {{index}} -->
                    <img :src=index lt=" " class="iamge " v-for="(index) in top.image ">
                    <!-- <img :src=index lt=" " class="iamge ">
                    <img :src=index lt=" " class="iamge "> -->
                    <!-- <img src="./images/overview-image2.jpeg " alt=" " class="iamge ">
                    <img src="./images/overview-image3.jpeg " alt=" " class="iamge "> -->
                </div>
            </div>
        </div>
        <!-- top end-->

        <!-- content start-->
        <div class="content center ">
            <div class="content-introduce ">
                <div class="content-introduce-tetx ">
                    <div class="content-data ">
                        <!-- 这里有个疑问 -->
                        <!-- 一定要外面放个div 才可以显示 边框嘛 -->

                        <div class="content-data-text " v-for="index in content.content_data ">
                            <span v-text="index.span"></span>
                            <p v-text="index.p"></p>
                            <!-- <span>收藏</span>
                            <p>2200</p> -->
                        </div>
                        <!-- <div class=" content-data-text ">
                            <span>点赞</span>
                            <p>22000</p>
                        </div>
                        <div class="content-data-text ">
                            <span>转发</span>
                            <p>12200</p>
                        </div> -->
                    </div>
                    <div class="content-tetx ">
                        <p v-for="index in content.content_tetx " v-text="index"></p>
                        <!-- <p>《武林外传》是由尚敬执导，闫妮、沙溢、姚晨、喻恩泰、姜超、王莎莎等主演的章回体古装情景喜剧。</p>
                        <p>该剧于2006年1月2日在CCTV8黄金档首播，并陆续在中国大陆各地方电视台重播。</p>
                        <p>该剧在香港由无线电视首播，在台湾由八大电视台首播。</p>
                        <p>该剧的故事围绕着一个在虚拟的明代（约在万历年间）的关中地区小镇七侠镇中同福客栈里的女掌柜佟湘玉和她的几个伙计展开。这群年轻人在同一屋檐下演绎了一幕幕经典的搞笑场面，在欢笑与眼泪中陪伴观众们一起渐渐成长。</p>
                        <p>本剧抨击了宣扬暴力的武侠文化，并对当时的社会现象进行了模仿、讽刺与批判。</p> -->
                    </div>
                    <!-- 使用flex 布局失败  回头学习下 -->
                    <!-- <div class="content-table ">     
                    <div class="row ">
                        <div class="row-item ">
                            <span>类型</span>
                            <span>章回体、古装、情景、喜剧</span>
                        </div>
                        <div class="row-item ">
                            <span>导演</span>
                            <span>尚敬</span>
                        </div>
                        <div class="row ">
                            <div class="row-item ">
                                <span>首播时间</span>
                                <span>2006年1月2日</span>
                            </div>
                            <div class="row-item ">
                                <span>中文名</span>
                                <span>武林外传</span>
                            </div>
                        </div>
                    </div>
                </div> -->
                    <!-- content-table start -->
                    <!-- <table class="content-table ">
                        <tr>
                            <td>
                                <p class="th ">
                                    类型
                                </p>
                            </td>
                            <td>
                                <p class="td ">
                                    章回体、古装、情景、喜剧
                                </p>
                            </td>
                            <td>
                                <p class="th ">导演</p>
                            </td>
                            <td>
                                <a href="# ">尚敬</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p class="th ">
                                    首播时间
                                </p>
                            </td>
                            <td>
                                <p class="td ">
                                    2006年1月2日
                                </p>
                            </td>
                            <td>
                                <p class="th ">
                                    中文名
                                </p>
                            </td>
                            <td>
                                <p class="td ">
                                    武林外传
                                </p>
                            </td>
                        </tr>
                    </table> -->

                    <div class="content-table">
                        <div class="row">
                            <div class="col">
                                <span class="name">类型</span>
                                <span class="data">章回体、古装、情景、喜剧</span>
                            </div>
                            <div class="col">
                                <span class="name">导演</span>
                                <span class="data"><a href="#">导演</a></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <span class="name">首播时间</span>
                                <span class="data">2006年1月2日</span>
                            </div>
                            <div class="col">
                                <span class="name">中文名</span>
                                <span class="data">武林外传</span>
                            </div>
                        </div>
                    </div>

                    <!-- content-table end -->
                </div>
                <div class="content-image ">
                    <img :src=content.content_image alt=" ">
                </div>
            </div>
        </div>

        <!-- content end-->


        <!-- information start-->
        <div class="information center ">
            <div class="information-introduce ">
                <h2>基本信息</h2>
                <!-- <table class="information-table ">
                    <tr v-for=" index in information.table ">
                        <td>
                            <p class="th" v-text="index.name"></p>
                        </td>
                        <td>
                            <p class="td" v-text="index.value[0]"></p>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <p class="th ">
                                中文名
                            </p>
                        </td>
                        <td>
                            <p class="td ">
                                武林外传
                            </p>
                        </td>
                        <td>
                            <p class="th ">
                                主演
                            </p>
                        </td>
                        <td>
                            <p class="td ">
                                间妮、沙溢、姚晨、喻恩泰、姜超、王莎莎、倪虹
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p class="th ">
                                外文名
                            </p>
                        </td>
                        <td>
                            <p class="td ">
                                My Own Swordsman
                            </p>
                        </td>
                        <td>
                            <p class="th ">
                                集数
                            </p>
                        </td>
                        <td>
                            <p class="td ">
                                80集(电视播出80集，网络平台81集)
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p class="th ">
                                出品公司
                            </p>
                        </td>
                        <td>
                            <p class="td ">
                                北京联盟影业投资有限公司
                            </p>
                        </td>
                        <td>
                            <p class="th ">
                                每集长度
                            </p>
                        </td>
                        <td>
                            <p class="td ">
                                47分钟
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p class="th ">
                                导演
                            </p>
                        </td>
                        <td>
                            <p class="td ">
                                尚敬
                            </p>
                        </td>
                        <td>
                            <p class="th ">
                                编剧
                            </p>
                        </td>
                        <td>
                            <p class="td ">
                                宁财神、程娇娥
                            </p>
                        </td>
                    </tr>
                </table> -->
                <div class="information-table">
                    <div class="row">
                        <div class="col">
                            <span class="name">中文名</span>
                            <span class="data">武林外传</span>
                        </div>
                        <div class="col">
                            <span class="name">主演</span>
                            <span class="data">闫妮、沙溢、姚晨、喻恩泰、姜超、王莎莎、倪虹</span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col">
                            <span class="name">外文名</span>
                            <span class="data">My Own Swordsman</span>
                        </div>
                        <div class="col">
                            <span class="name">集数</span>
                            <span class="data">80集(电视播出80集，网络平台81集)</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <span class="name">出品公司</span>
                            <span class="data">北京联盟影业投资有限公司</span>
                        </div>
                        <div class="col">
                            <span class="name">每集长度</span>
                            <span class="data">47分钟</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <span class="name">导演</span>
                            <span class="data">尚敬</span>
                        </div>
                        <div class="col">
                            <span class="name"> 编剧</span>
                            <span class="data">宁财神、程娇娥</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- information end-->

        <!-- performer start-->
        <div class="performer center ">
            <div class="performer-introduce ">
                <h2>演员介绍</h2>
                <ul>
                    <li v-for=" index in performer ">
                        <img :src=index.img alt=" ">
                        <div class="performer-tetx ">
                            <h3 v-text="index.h3"></h3>
                            <span v-text="index.span1"></span>
                            <span v-text="index.span2"></span>
                            <p v-text="index.p"></p>
                        </div>
                    </li>
                    <!-- <li>
                        <img src="./images/actor1.jpeg " alt=" ">
                        <div class="performer-tetx ">
                            <h3>佟湘玉</h3>
                            <span>演员 </span>
                            <span>间妮</span>
                            <p>寡妇门前是非多，而她这个只是在儿时见过丈夫的寡妇，是非少不了。身兼同福客栈的掌柜，和龙门镖局的千金，她从小娇生惯养锦衣玉食，下嫁衡山派掌门，却成了寡妇，从此要肩负起照顾尚未成年的小姑子的责任。所谓长嫂如母，她一直在努力当一名好嫂子兼幼教家，同时，身为掌柜，她还得全心全意去扶助身边的人们。这样的生活，她能适应吗? 这样的责任，她挑得起来吗?身在江湖，一个手无缚鸡之力的弱女子，她该如何自处?一个门前是非多的女人，她怎样去追求对白展堂的那份爱情?</p>
                        </div>
                    </li> -->
                    <!-- <li>
                        <img src="./images/actor2.jpeg " alt=" ">
                        <div class="performer-tetx ">
                            <h3>白展堂</h3>
                            <span>演员 </span>
                            <span>沙溢</span>
                            <p>浪子回头金不换，而他这个已经回了头的浪子，要到哪儿去换那块传说中的大金子? 他本是传说中的盗圣，却不热爱本职工作一个曾经有过惨痛历史的人，他想洗尽污点，但是那么多风起云涌的灿烂回忆，乃至退出江湖隐居此处，过上一种全新的生活。他真能放得下吗?一边是常年追缉他的女捕头，一边是始终在身边，且脉脉含情的佟掌柜，他该选择谁呢?</p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/actor3.jpeg " alt=" ">
                        <div class="performer-tetx ">
                            <h3>佟湘玉</h3>
                            <span>演员 </span>
                            <span>间妮</span>
                            <p>我是女侠我怕谁?此话不假，关键问题是，谁给她封的女侠?她的父亲是一代大侠，母亲是缉盗专家，可谓家世显赫。双亲的威名，始终把她笼罩在阴影之下。从小争胜好胜的她，选择了一条离家出走的道路，却在父亲终于同意让她再次闯江湖的第一站，却被扣在了同福客栈，从此开始了艰苦卓绝的杂役生涯。一个渴望行侠仗义的江湖小女子，一身娇横任性的毛病，她会习惯这种鸡毛蒜皮的生活吗? 真正的江湖，跟她想象中的一样吗?勇敢和鲁莽，是同一个概念吗?随着岁月流逝，和内心的成长，她能变成一个真正的女侠吗?</p>
                        </div>
                    </li> -->
                </ul>
            </div>
        </div>
        <!-- performer end-->
    </div>
</body>
<script src="./js/vue.js "></script>
<script src="./js/jQuery.js "></script>
<!-- <script src="./js/data.js "></script> -->
<script src="./js/inedx.js "></script>

<script>
</script>

</html>